<script setup>
    import {ref} from 'vue'
    import useUserInfoStore from '@/stores/userInfo.js'
    import {useTokenStore} from '@/stores/token.js'
    import { ElMessage, ElMessageBox } from 'element-plus';
    import {useRouter} from 'vue-router'
    import {warningPageQueryService} from '@/api/warning.js'

    const uploadRef = ref()
    const userInfoStore = useUserInfoStore();
    const tokenStore = useTokenStore();
    const router = useRouter();

    //列表的物品总数
    const itemsTotal = ref(1);

    //学生用户分页查询的表单结构
    const warningPageQueryData = ref({
        page: 1,
        pageSize: 5,
        id: null,
        deviceId: null,
        description: null,
        type: null,
    })

    const clients = ref([])

    //分页查询获取用户列表
    const getWarnings = async()=>{
        let result = await warningPageQueryService(warningPageQueryData.value);
        clients.value = result.records
        itemsTotal.value = result.total
    }
    //页面加载时获取一次所有用户
    getWarnings()
    
    //分页大小改变时重新分页查询
    const handleSizeChange = (val) => {
        warningPageQueryData.value.pageSize = val
        getWarnings()
    }
    //分页页码改变时重新分页查询
    const handleCurrentChange = (val) => {
        warningPageQueryData.value.page = val
        getWarnings()
    }



</script>

<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>告警管理</span>
            </div>
        </template>

        <div>
            <!-- 顶部栏，包含分页查询过滤条件，以及创建新用户 -->
            <el-form class="search-filter" :model="warningPageQueryData">
                <el-form-item label="ID">
                    <el-input v-model="warningPageQueryData.id" type="number"></el-input>
                </el-form-item>
                <el-form-item label="设备ID">
                    <el-input v-model="warningPageQueryData.deviceId" type="number"></el-input>
                </el-form-item>
                <!-- <el-form-item label="告警类型">
                    <el-input v-model="warningPageQueryData.type" type="text"></el-input>
                </el-form-item> -->
                <el-form-item label="告警名称">
                    <el-input v-model="warningPageQueryData.name" type="text"></el-input>
                </el-form-item>
                <el-form-item>
                        <el-button type="primary" @click="getWarnings">搜索</el-button>
                </el-form-item>
            </el-form>
        </div>

        <hr style="background-color: #eee; height: 1px; border: none;"/>

        <!-- 用户表格 -->
        <el-table :data="clients" style="width: 100%">
            <el-table-column prop="id" label="ID" width="180" sortable  />
            <el-table-column prop="name" label="告警名称" width="180" sortable  />
            <el-table-column prop="deviceId" label="设备ID" width="180" sortable  />
            <el-table-column prop="deviceName" label="设备名称" sortable />
            <el-table-column prop="typeName" label="告警类型" sortable />
            <el-table-column prop="description" label="描述" sortable />
            <el-table-column prop="operations" label="操作" fixed="right">
                <template #default="scope">
                    <!-- <el-button link type="primary" size="small" @click="editUser(scope.row)">查看详情</el-button> -->
                </template>
            </el-table-column>

        </el-table>

        <!-- 页码切换组件 -->
        <div class="pagination-block">
            <el-pagination layout="prev, pager, next, sizes" :total="itemsTotal" :page-size="warningPageQueryData.pageSize"
            v-model:current-page="warningPageQueryData.page"
            v-model:page-size="warningPageQueryData.pageSize"
            
            :page-sizes="[5, 10, 20, 50]"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"/>
        </div>
    </el-card>


</template>

<style scoped>
    .search-filter {
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .pagination-block{
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-edit-user {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .form-edit-user-avatar {
        display: flex;
        justify-content: center;
        padding: 32px;
    }
    
</style>
